<template>
  <el-dialog title="Allocate" :visible.sync="allocationVisible">
    <el-table
      ref="singleSelectTable"
      border
      fit
      highlight-current-row
      style="width: 100%;"
      :data="tableData"
      :selectable="true"
      @row-click="handleRowClick"
      @sort-change="sortChange"
      @select="handleSelectionChange"
      @select-all="handleSelectAll"
    >
      <!-- 选择列 -->
      <el-table-column
        type="selection"
        width="50"
      />
      <el-table-column label="序号" align="center" width="60">
        <template slot-scope="{row, $index}">
          <span>{{ getRowIndex($index) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="角色名" min-width="150px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="角色代码" min-width="150px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.code }}</span>
        </template>
      </el-table-column>
      <!-- ...其他列... -->
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="pageIndex" :limit.sync="pageSize" />
    <div slot="footer" class="dialog-footer">
      <el-button @click="allocationVisible = false">
        取消
      </el-button>
      <el-button type="primary" @click="updateCharacter">
        确定
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import pagination from '@/components/Pagination'
export default {
  components: { pagination },
  data() {
    return {
      // 对话框可见状态
      allocationVisible: false,
      list: null,
      selectedRows: null,
      currentSelectedIndex: null,
      newCharacter: {
        name: 'daishengran'
      },
      tableData: null,
      allocateList: null,
      pageIndex: 1,
      pageSize: 20,
      total: 0
    }
  },
  methods: {
    updateCharacter() {
      this.allocateList = this.selectedRows.map(row => row.id)
      this.$emit('edit', this.newCharacter, this.allocateList) // 发送事件给父组件
    },
    handleRowClick(row, column, event) {
      // 清除之前选中的行（如果有的话）
      if (this.currentSelectedIndex !== null) {
        this.$refs.singleSelectTable.setCurrentRow(null)
        // 也可以根据你的需求，更新 tableData 中的选中状态
      }

      // 设置当前选中的行
      this.currentSelectedIndex = this.tableData.indexOf(row)
      this.$refs.singleSelectTable.setCurrentRow(row)
      // 在这里你可以根据需要进行其他操作，比如更新组件状态或发送请求
      this.newCharacter = row
    },
    /**
     * 更新选中的行
     */
    handleSelectionChange(selection, row) {
      // 更新选中的行
      this.selectedRows = selection
      console.log('当前选择的行:', this.selectedRows)
    },
    /**
     * 更新全选的行
     */
    handleSelectAll(selection) {
      // 更新全选的行
      this.selectedRows = selection
      console.log('全选:', this.selectedRows)
    },
    getRowIndex(index) {
      return (this.pageIndex - 1) * this.pageSize + index + 1
    }
  }
}
</script>
